<template>
  <div class="column">
   <ve-histogram :data="chartData" :settings="chartSettings" height='340px' :extend="chartExtend"></ve-histogram>
  </div>
</template>

<script>
export default {
  name: '',
  data(){
    return {
      chartExtend:{
        series:{
          barWidth: 30,
        }
      },
      chartSettings:{
        labelMap: {
        'num': '会话数',//n2提示
        },
        legendName: {
          '会话数': '会话总数'//n1提示，n2title
        },
      },
      chartData:{
        columns: ['date', 'num'],
        rows: [
          // { 'date': '会话消息数 < 3条', 'num': 1204},
          // { 'date': '会话消息数 3-15条', 'num': 3530},
          // { 'date': '会话消息数 15-50条', 'num': 2923},
          // { 'date': '会话消息数 50-100条', 'num': 1723},
          // { 'date': '会话消息数 100-200条', 'num': 123},
          // { 'date': '会话消息数 > 200条', 'num': 2222},
        ]
      }
    }
  },
  props:['toColumnDate'],
  created(){
  },
  mounted(){
    this.chartData.rows = this.toColumnDate.rows;
    this.chartSettings.labelMap.num = this.toColumnDate.title.tip;
    this.chartSettings.legendName[this.toColumnDate.title.tip] = this.toColumnDate.title.allTip;
  },
  methods:{

  },
  components:{

  },
  computed:{
    
  },
  watch:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.column {
  width: 100%;
  height: 400px;
}
</style>
